<template>
    <div class="home">
        欢迎登陆,{{this.$store.state.user.name}}
        <el-container>
            <!--左侧 -->
            <el-aside width="200px">
                <div align="left">
                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                        <el-radio-button :label="false">展开</el-radio-button>
                        <el-radio-button :label="true">收起</el-radio-button>
                    </el-radio-group>

                    <!--  这里是导航菜单  -->
                    <el-menu router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                             :collapse="isCollapse">
                        <el-submenu :index="index+1+''" v-for="(menu,index) in this.$router.options.routes[0].children">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span slot="title">{{ menu.name }}</span>
                            </template>
                            <!--       二级菜单遍历       -->
                            <el-menu-item v-for="item in menu.children" :index="item.path"
                                          :route="{path:item.path,query:{plan :item.oper}}">{{ item.name }}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-aside>
            <!-- 右侧，主要展示区域   -->
            <el-main>
                <div>
                    <!--     路由的出口:当前home组件的子组件(children)显示的位置-->
                    <router-view></router-view>
                </div>
            </el-main>
        </el-container>

    </div>
</template>


<script>
    export default {
        name: "",
        data() {
            return {
                isCollapse: false
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>